<template>
  <div class="frank_scene">
    <div class="scene_left">
      <div class="box1">
        <medical-point-scene></medical-point-scene>
      </div>
    </div>
    <div class="scene_center">
      <div class="box1">
        <ambulance-scene></ambulance-scene>
      </div>
    </div>
    <!-- <div class="scene_right">
      <div class="box1">
        <hospital-scene></hospital-scene>
      </div>
    </div> -->
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import EMRecord from 'views/dialog/EMRecord';
import MedicalPointScene from './childComponent/MedicalPointScene.vue';
import AmbulanceScene from './childComponent/AmbulanceScene.vue';
import HospitalScene from './childComponent/HospitalScene.vue';

export default {
  name: 'Scene',
  components: { 
    EMRecord, 
    MedicalPointScene, 
    AmbulanceScene, 
    HospitalScene 
  },
  props: [],
  setup() {
    const state = reactive({});
    onBeforeMount(async () => { });
    onMounted(() => { });
    const refState = toRefs(state);
    // 方法和变量必须return出去*******************
    return {
      // 状态
      ...refState
    };
  },
};
</script>
<style scoped>
.frank_scene {
  display: flex;
}

.scene_left,
.scene_center,
.scene_right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.scene_left,
.scene_center {
  flex: 1.2;
  height: calc(100vh - 65px);
}

.scene_right {
  flex: 1;
  height: calc(100vh - 65px);
}

.frank_scene .scene_left .box1,
.frank_scene .scene_center .box1,
.frank_scene .scene_right .box1 {
  height: 98%;
  width: 98%;
  background: #fff;
}

.frank_scene .box2 {
  height: 18%;
  width: 98%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
</style>